<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <title>找回密码</title>
  <link type="text/css" rel="stylesheet" href="${ctx}/css/unified/unified_sjyx.css">
  <style type="text/css">
    .form{background-color:#404040;}
    /*.form-grp{background-color:#3a3a3a;}*/
    #embed-captcha{height:210px;}
    #embed-captcha .gt_holder{margin:30px 85px;}
    .float_geetest { display: inline-block;  margin-left: 40px;  margin-top: 20px;}
  </style>
</head>
<body>
<div class="page">
  <!--左半部分-->
  <div class="left">
    <div class="left-center">
      <div class="img left_img"></div>
      <p class="left_p">关注货运业，关怀货运人</p>
    </div>
  </div>
  <!--右半部分-->
  <div class="right">
    <!--错误提示背景色红-->
      <c:if test="${!empty error}">
          <p class="error-msg-alt">${error}</p>
      </c:if>
    <!--主要内容-->
    <div class="right-center register">
      <!--切换标签-->
      <div class="tab">
        <p class="current" onclick="tabExchange(this,'mobile','email');">通过手机号找回</p>
        <p onclick="tabExchange(this,'email','mobile');">通过邮箱找回</p>
      </div>
      <!--切换内容-->
      <div class="con">
        <form action="${ctx}/user/reset-password" method="post" id="mobile-password-form">
        <div class="con-item mobile">
          <div class="form-grp">
            <span class="form-title"><i>*</i>手机号码:</span>
            <div class="form-input-grp">
              <div class="error-out"><div class="error-msg hide"><span>密码长度不够！</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>
              <input type="text" id="mobile" placeholder="请输入您注册时用到的手机号码" class="form-input" name="mobile">
            </div>
          </div>
          <div class="form-grp">
            <div class="float_geetest" id="float-captcha"></div>
            <p id="wait" class="show float_geetest">正在加载验证码......</p>
            <p id="notice" class="hide">请先拖动验证码到相应位置</p>
          </div>

          <div class="form-grp">
            <span class="form-title"><i>*</i>验证码:</span>
            <div class="form-input-grp">
              <div class="error-out"><div class="error-msg hide"><span>密码长度不够！</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>
              <input type="text" id="yzm" placeholder="将您接收到的验证码填写到这里" class="form-input yzm" name="captcha">
              <div class="form-btn form-btn-e yzm-btn" onclick="getPhoneTemp('${ctx}','find_password');" id="yzm-button" >获取验证码</div>
            </div>
          </div>
          <div class="form-btn form-btn-u fd" onclick="findByMobile('${ctx}','find_password');">下一步</div>
        </div>
        </form>
        <div class="con-item email hide">
          <div class="form-grp">
            <span class="form-title"><i>*</i>邮箱地址:</span>
            <div class="form-input-grp">
              <div class="error-out"><div class="error-msg hide"><span>密码长度不够！</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>
              <input type="text" id="emailadrs" placeholder="请输入您注册时用到的邮箱地址" class="form-input" >
            </div>
          </div>
          <div class="form-btn form-btn-u fd" onclick="findByEmail('${ctx}');">下一步</div>
        </div>
      </div>
    </div>
    <div class="send-email-success hide">
      <div class="img img-email"></div>
      <p class="email-msg">我们已向您的邮箱<span id="email-name"></span>中发送了一封密码找回邮件，请您注意接收邮件！</p>
      <p class="email-des">请您注意接收邮件，并按照邮件中的提示操作，完成安全验证。
        没有收到邮件？ 请检查是否归类到垃圾邮件文件夹 或 <a onclick="sendAgain(this,'${ctx}','find_password');">重新发送</a>。</p>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="${ctx}/js/libs/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/common/validate.js"></script>
<script type="text/javascript" src="${ctx}/js/unified/unified_sjyx.js"></script>
<script type="text/javascript" src="${ctx}/js/unified/unified_fr.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script type="text/javascript" src="http://static.geetest.com/static/tools/gt.js"></script>
</html>